import { useAPIUtils } from "@/components/APIUtilsProvider";
import PageLayout from "@/components/PageLayout";
import {
  Button,
  Divider,
  Text,
  Flex,
  Box,
  Grid,
  Select,
  Title,
  Group,
} from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import { useForm } from "@mantine/form";
import { IconFileChart } from "@tabler/icons-react";
import dayjs from "dayjs";
import { useState } from "react";

export default function GlobalData() {
  const {
    restGET,
    tanstackQuery,
    tanstackInvalidate,
    restPOST,
    restPUT,
    restDELETE,
  } = useAPIUtils();

  const initialValues = {
    start: dayjs().startOf("year").toDate(),
    end: new Date(),
  };

  const [range, setRange] = useState(null);

  const query = tanstackQuery("/api/admin/orders/global/stats", {
    ...range,
  });

  const searchForm = useForm({
    mode: "uncontrolled",
    initialValues,
    validate: {},
  });

  const formValues = searchForm.values;

  return (
    <PageLayout title={"全量数据"}>
      <form>
        <Flex
          mih={50}
          mb={44}
          gap="md"
          justify="flex-start"
          align="flex-end"
          direction="row"
          wrap="wrap"
        >
          <DateTimePicker
            description="时间开始"
            {...searchForm.getInputProps("start")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />
          <DateTimePicker
            description="时间结束"
            {...searchForm.getInputProps("end")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />

          <Button
            onClick={() =>
              setRange({
                start: dayjs(formValues.start).format("YYYY-MM-DDTHH:mm:ss"),
                end: dayjs(formValues.end).format("YYYY-MM-DDTHH:mm:ss"),
              })
            }
          >
            查询
          </Button>
        </Flex>
      </form>
      {query.data && <Display {...query.data} />}
    </PageLayout>
  );
}

const Display = ({ orderCount, totalPv, totalPrice }) => {
  return (
    <Box padding="md">
      <Grid gutter="0" style={{ border: "0.1px solid rgba(0, 0, 0, 0.1)" }}>
        <>
          <Grid.Col
            span={2}
            bg={"gray.1"}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text weight={100} size="sm">
              总单数
            </Text>
          </Grid.Col>
          <Grid.Col
            span={10}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text>{orderCount}</Text>
          </Grid.Col>
          <Grid.Col
            span={2}
            bg={"gray.1"}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text weight={100} size="sm">
              总交易金额
            </Text>
          </Grid.Col>
          <Grid.Col
            span={10}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text>{totalPrice}</Text>
          </Grid.Col>
          <Grid.Col
            span={2}
            bg={"gray.1"}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text weight={100} size="sm">
              总积分
            </Text>
          </Grid.Col>
          <Grid.Col
            span={10}
            p={12}
            style={{ border: "0.5px solid rgba(0, 0, 0, 0.1)" }}
          >
            <Text>{totalPv}</Text>
          </Grid.Col>
        </>
      </Grid>
    </Box>
  );
};
